<template>
  <div class="home">
    <!-- 父容器高度 -->

    <b-scroll class="bscroll" ref="bscroll" 
    :list="list" 
    :pullDown=pullDown
    :scrollEnd="true"
    :pullUpLoad="true"
    @pullingDown="pullingDown"
    @pullingUp="pullingUp"
    @scrollEnd="scrollEnd" @scroll="scroll">
      <div>
        <ul class="bscroll-container" @click="scroll">
          <li v-for="(item, index) in list" :key="index">
            <span>{{item}}</span>
          </li>
        </ul>
      </div>
    </b-scroll>
  </div>
</template>

<script>
import BScroll from "../components/scroll2";
import axios from "axios";
export default {
  name: "Home",
  components: {
    BScroll
  },
  data() {
    return {
      list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13],
      show: true,
      loadshow: false,
      loadmsg: "",
      msg: "下拉刷新",
      lastTime: 0,
      moremsg: "加载更多",
      pullDown:{refreshText:"下拉刷新"}
    };
  },

  methods: {
    scrollEnd(pos) {
      console.log("scrollEnd", pos);
    },
    scroll(pos) {
      if(pos.y>70){
         this.pullDown={refreshText:"释放立即刷新"}
      }
      // console.log("scroll", pos);
    },
    pullingUp(){
      console.log('加载更多');
      axios.get("https://slowmo.glitch.me/3000").then(res => {
          console.log(res);
            this.list = [...this.list,99,100];
        });
    },
    pullingDown(){
        
      console.log('pullingDown');
      axios.get("https://slowmo.glitch.me/3000").then(res => {
          console.log(res);
            this.pullDown={refreshText:"下拉刷新"}
            this.list = [-2, -1, ...this.list];
        });
    }
  }
};
</script>


<style scoped>
.bscroll {
  width: 100%;
  height: 617px;
  overflow: hidden;
  position: relative;
}
.load {
  position: absolute;
  left: 0;
  top: -60px;
  width: 100%;
  height: 30px;
  line-height: 30px;
  background: #fff;
}
.liload {
  width: 100%;
  height: 30px;
  line-height: 30px;
  background: skyblue;
}
li {
  height: 50px;
  width: 100%;
  border-bottom: 1px solid #ccc;
  line-height: 30px;
}
</style>



// beforeScrollStart -> 触发时机：滚动开始之前
// scrollStart -> 触发时机：滚动开始时
// scroll -> 触发时机：滚动过程中，具体时机取决于选项中的 probeType。
// scrollCancel -> 触发时机：滚动被取消。
// scrollEnd -> 触发时机：滚动结束。
// touchEnd -> 触发时机：鼠标/手指离开。